<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - 校园报投稿系统</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .login-container {
            max-width: 400px;
            margin: 80px auto;
            background: white;
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.1);
        }
        
        .login-container h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #444;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-header img {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
        }
        
        .login-footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 0.9rem;
        }
        
        .login-error {
            background-color: #fee;
            color: #e74c3c;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h2>管理后台登录</h2>
            <p>请使用管理员账号登录系统</p>
        </div>
        
        <div class="login-error" id="loginError">登录失败，请检查用户名和密码</div>
        
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </form>
        
        <div class="login-footer">
            <p>&copy; 2024 校园报投稿系统 版权所有</p>
            <p><a href="../index.html">返回首页</a></p>
        </div>
    </div>

    <script>
        const loginForm = document.getElementById('loginForm');
        const loginError = document.getElementById('loginError');
        
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = loginForm.username.value;
            const password = loginForm.password.value;
            
            // 重置错误消息
            loginError.textContent = '登录失败，请检查用户名和密码';
            loginError.style.display = 'none';
            
            try {
                // 连接到生产环境API
                const apiUrl = window.location.origin + '/api/admin/login';
                console.log('正在连接API:', apiUrl);
                
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (data.success || response.ok) {
                    // 登录成功，保存token和用户信息
                    localStorage.setItem('adminToken', data.token || 'token');
                    localStorage.setItem('adminInfo', JSON.stringify(data.admin || { id: 1, username }));
                    localStorage.setItem('adminLoggedIn', 'true');
                    
                    // 跳转到仪表盘
                    window.location.href = 'dashboard.html';
                } else {
                    // 登录失败，显示错误消息
                    loginError.textContent = data.error || '用户名或密码错误';
                    loginError.style.display = 'block';
                }
            } catch (err) {
                console.error('API连接错误:', err);
                loginError.textContent = '服务器连接失败，请稍后重试';
                loginError.style.display = 'block';
                
                // 作为备用方案，尝试连接mock API
                try {
                    console.log('尝试连接Mock API...');
                    const mockResponse = await fetch('http://localhost:3000/api/admin/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ username, password })
                    });
                    
                    const mockData = await mockResponse.json();
                    
                    if (mockData.success || mockResponse.ok) {
                        localStorage.setItem('adminToken', mockData.token || 'mock-token');
                        localStorage.setItem('adminInfo', JSON.stringify(mockData.admin || { id: 1, username }));
                        localStorage.setItem('adminLoggedIn', 'true');
                        window.location.href = 'dashboard.html';
                    } else {
                        loginError.textContent = mockData.error || '用户名或密码错误';
                        loginError.style.display = 'block';
                    }
                } catch (mockErr) {
                    console.error('Mock API连接错误:', mockErr);
                    // 作为最后的备用方案，使用本地验证
                    if (username === 'jxhjschool' && password === 'jxhjschool_2038') {
                        localStorage.setItem('adminToken', 'local-token-123');
                        localStorage.setItem('adminInfo', JSON.stringify({ id: 1, username }));
                        localStorage.setItem('adminLoggedIn', 'true');
                        window.location.href = 'dashboard.html';
                    } else {
                        loginError.textContent = '用户名或密码错误';
                        loginError.style.display = 'block';
                    }
                }
            } finally {
                // 清空密码字段
                loginForm.password.value = '';
            }
        });
    </script>
</body>
</html>